<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人博客</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="swiper-4.5.0/dist/css/swiper.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="wrap">
    <header>
        <div class="container">
            <div class="logo">
                <span>Solo刘的博客</span>
            </div>
            <ul class="head">
                <li><a href="">首页</a></li>
                <li><a href="">关于我</a></li>
                <li><a href="">心情笔记</a></li>
                <li><a href="">技术干货</a></li>
                <li><a href="">读书笔记</a></li>
                <li><a href="">个人作品</a></li>
                <li><a href="">留言板</a></li>
            </ul>
            <input type="text" placeholder="输入你要找的内容">
            <i class="iconfont ss">&#xe658;</i>
        </div>
    </header>
    <div class="marauto">
        <div class="container">
            <div class="mar-l">
                <div class="swiper-container gallery-top">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" style="background-image:url(images/one.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(images/two.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(images/three.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(images/four.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(images/five.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(images/six.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(images/seen.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(images/get.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(images/three.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(images/one.jpg)"></div>
                    </div>
                    <!-- Add Arrows -->
                    <!--<div class="swiper-button-next swiper-button-white"></div>-->
                    <!--<div class="swiper-button-prev swiper-button-white"></div>-->
                </div>
                <div class="swiper-container gallery-thumbs">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" style="background-image:url(images/one.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(images/two.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(images/three.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(images/four.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(images/five.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(images/six.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(images/seen.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(images/get.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(images/one.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(images/one.jpg)"></div>
                    </div>
                </div>
                <div class="mar-l-a">
                    <h6>特别推荐</h6>
                    <ul class="nav">
                        <li class="iteam"><a href="">
                            <img class="ul-1" src="images/haf.jpg" alt="">
                            <h3>哈佛大学用这12张图，教育了10亿人心灵</h3>
                            <p>很多人把感恩当成一种付出，其实感恩本身就是一种幸福。...</p>
                        </a></li>
                        <li><a href="">
                            <img class="ul-1" src="images/heshang.jpg" alt="">
                            <h3>梳子能卖给和尚,你信吗？而所谓的营销到</h3>
                            <p>今天和大家分享一个营销的理念！也是我从别的渠道看到的觉得非常不错，分享给大家！ 有一个营销经理想考考他的手下，就给他们出了一道题,...</p>
                        </a></li>
                        <li class="iteam"><a href="">
                            <img class="ul-1" src="images/lvcha.jpg" alt="">
                            <h3>为什么男人喜欢绿茶婊，这让女汉子如何活</h3>
                            <p>今天咱们来谈谈绿茶婊 绿茶婊 泛指那些外表清新脱俗， 内心工于心计的女子。 很多妹纸在后台哭诉， 为什么好男人都喜欢绿茶婊？ 她都骚的那么</p>
                        </a></li>
                        <li><a href="">
                            <img class="ul-1" src="images/cj.jpg" alt="">
                            <h3>【力荐】一个北漂五年的人告诉你，为什么</h3>
                            <p>还有人问我，凭什么就说钱是人的胆？ 尊严大于一切!有尊严就有活着的意义!没钱也可以有尊严，你这是悖论，当你的孩子看到一样东西露出渴望</p>
                        </a></li>
                        <li class="iteam"><a href="">
                            <img class="ul-1" src="images/nq.jpg" alt="">
                            <h3>今年我二十岁</h3>
                            <p>我今年二十岁 不再乱买东西 月底开始算计 还了信用卡 开销多少 还剩下多少 该开始攒钱买房子了 我今年二十岁 偶尔会有寂寞 偶尔会挂念一个人 </p>
                        </a></li>
                        <li><a href="">
                            <img class="ul-1" src="images/mf.jpeg" alt="">
                            <h3>【力荐】年轻的时候为什么不努力就是在犯</h3>
                            <p>　一个人很丑，有个很漂亮的老婆，这个人一定不简单，一是营销能力强；二是心理战术一定不错。不要去诋毁人家，多向人家学习。
                                ...</p>
                        </a></li>
                    </ul>
                </div>
                <div class="mar-l-b">
                    <h6>最新发布</h6>
                    <div class="mar-main">
                        <div class="main-tb">
                            <div class="tp">
                                <img src="images/java1.jpg" alt="">
                            </div>
                            <a href="">什么是变量,数据类型有哪些？</a>
                            <p>什么是变量 变量就是储存数据的空间。 变量的规范命名： 1.字下美人其后数 2.不可以使用关键词 3.不可以重复定义 4.首字母小写，其后首字母大写，还要见名知意。 变量的步骤： 先声...</p>
                            <p style="margin-top: 40px">
                                <span><i class="iconfont rw">&#xe604;</i> 刘少宇</span>
                                <span><i class="iconfont sj">&#xe810;</i> 2019-8-26</span>
                                <span><i class="iconfont ll">&#xe640;</i> 1次浏览</span>
                                <span>个人博客:[Java]</span>
                            </p>
                        </div>
                        <div class="main-tb">
                            <div class="tp">
                                <img src="images/if.jpg" alt="">
                            </div>
                            <a href="">Java中 为什么要使用if语句，if-else的用法</a>
                            <p>上一章我们学习了变量的用法和常用的数据类型：int double char String boolean等，另外也学习了一些运算符，包括算术运算符、赋值运算符以及关系运算符。...</p>
                            <p style="margin-top: 40px">
                                <span><i class="iconfont rw">&#xe604;</i> 刘少宇</span>
                                <span><i class="iconfont sj">&#xe810;</i> 2019-8-22</span>
                                <span><i class="iconfont ll">&#xe640;</i> 8次浏览</span>
                                <span>个人博客:[Java]</span>
                            </p>
                        </div>
                        <div class="main-tb">
                            <div class="tp">
                                <img src="images/sm.jpg" alt="">
                            </div>
                            <a href="">现实“三毛”与我的故事</a>
                            <p>讲个故事给大家听下: 隆隆ago 大家都听过三毛流浪记的故事 那是发生在旧社会的故事 三毛流浪在城市的某个角落 做着各种各样的事情，事情的内容 请各位自己回忆和脑补...</p>
                            <p style="margin-top: 40px">
                                <span><i class="iconfont rw">&#xe604;</i> 刘少宇</span>
                                <span><i class="iconfont sj">&#xe810;</i> 2019-7-15</span>
                                <span><i class="iconfont ll">&#xe640;</i> 21次浏览</span>
                                <span>个人博客:[生活]</span>
                            </p>
                        </div>
                        <div class="main-tb">
                            <div class="tp">
                                <img src="images/yhbk.jpg" alt="">
                            </div>
                            <a href="">比较完整的SEO优化方案</a>
                            <p>根据自己的个人经验完成了这篇文章，希望对SEOer有点帮助，高手直接跳过，请勿喷水。。。...</p>
                            <p style="margin-top: 40px">
                                <span><i class="iconfont rw">&#xe604;</i> 刘少宇</span>
                                <span><i class="iconfont sj">&#xe810;</i> 2019-6-1</span>
                                <span><i class="iconfont ll">&#xe640;</i> 30次浏览</span>
                                <span>个人博客:[Java]</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mar-r">
                <div class="mar-r-a">
                </div>
                <div class="mar-r-b">
                    <p>民主&nbsp; &nbsp;富强&nbsp; &nbsp;文明&nbsp; &nbsp;和谐 <br>
                        自由&nbsp; &nbsp;平等&nbsp; &nbsp;公正&nbsp; &nbsp;法制 <br>
                        爱国&nbsp; &nbsp;敬业&nbsp; &nbsp;诚信&nbsp; &nbsp;友善</p>
                </div>
                <div class="nav-l">
                    <h4>热门标签</h4>
                    <ul class="nav-l-xia">
                        <li><a href="">java</a></li>
                        <li><a href="">刘少宇</a></li>
                        <li><a href="">js</a></li>
                        <li><a href="">css</a></li>
                        <li><a href="">html</a></li>
                        <li><a href="">娱乐</a></li>
                        <li><a href="">家</a></li>
                        <li><a href="">c++</a></li>
                        <li><a href="">PHP</a></li>
                        <li><a href="">MySQL</a></li>
                        <li><a href="">大数据</a></li>
                        <li><a href="">ajax</a></li>
                        <li><a href="">笔记</a></li>
                        <li><a href="">Dreamweaver</a></li>

                    </ul>
                </div>
                <div class="falw">
                    <h4>友情链接</h4>
                    <ul>
                        <li><a href="http://www.python66.com/">python教程</a></li>
                        <li><a href="https://www.duanliang920.com/">段亮博客</a></li>
                        <li><a href="https://github.com/">GitHub</a></li>
                        <li><a href="https://developer.mozilla.org/zh-CN/docs/Web">MDN web docs</a></li>
                        <li><a href="https://juejin.im/timeline">稀土掘金</a></li>
                        <li><a href="https://www.freecodecamp.org/">freeCodeCamp</a></li>
                        <li><a href="https://stackoverflow.com">stackoverflow</a></li>
                        <li><a href="https://www.npmjs.com">js类库</a></li>
                        <li><a href="https://segmentfault.com"> segmentfault</a></li>
                        <li><a href="https://leetcode.com/">LeetCode</a></li>
                        <li><a href=""></a></li>
                    </ul>
                </div>
                <div class="bot">
                    <h4>联系我</h4>
                    <p>QQ：857324938</p>
                    <p>微信：solo686666</p>
                    <p>手机号：15531050101</p>
                    <p>邮箱：857324938@qq.com</p>
                    <img src="images/wx.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
    <footer>
        <div class="container">
            <div class="footer-m">
                <a href="">关于 |</a>
                <a href="">学习 |</a>
                <a href="">娱乐 |</a>
                <a href="">成长 |</a>
                <span>Design by:刘少宇 |</span>
                <span>冀ICP备字06016263-1号 |</span>
                <a href="">网络地图</a>
            </div>
        </div>
    </footer>
</div>
<script src="swiper-4.5.0/dist/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>